<template>
  <view class="gender-modal-wrap">
    <u-popup
      :show="show_xingbie"
      :overlay="true"
      mode="bottom"
      :closeable="false"
      :closeOnClickOverlay="true"
      @close="onClose_xingbie"
      @open="onOpen"
      :safeAreaInsetBottom="true"
      round="0">
      <view class="cus-pop-box">
        <view class="pop-title">性别</view>
        <view class="pop-ctx">
          <view class="xingbie-box">
            <view class="items">
              <view
                class="item"
                v-for="(item, index) in xingbie_list"
                :key="index"
                :class="{ select: xingbie_select.value == item.value }"
                @click="xingbie_select = item">
                {{ item.title }}
              </view>
            </view>
          </view>
        </view>

        <view class="pop-foot">
          <view class="safe-fixed-bottom">
            <view class="btn flex-center" @click="doPopConfirm_xingbie()">
              确认
            </view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      //性别
      show_xingbie: false,
      xingbie_select: {},
      xingbie_list: [
        {
          title: "男",
          value: "1",
        },
        {
          title: "女",
          value: "2",
        },
      ],
    };
  },
  watch: {},
  methods: {
    init() {
      this.show_xingbie = true;
    },
    doPopConfirm_xingbie() {
      if (!this.xingbie_select.value) {
        this.$alert("请选择性别");
        return;
      }
      this.$emit("confirm", this.xingbie_select);
      this.show_xingbie = false;
    },
    onClose_xingbie() {
      this.show_xingbie = false;
    },
    onOpen() {},
  },
};
</script>

<style lang="scss" scoped>
.cus-pop-box {
  padding-top: 40rpx;

  .pop-title {
    margin-bottom: 30rpx;
    text-align: center;
    font-weight: bold;
    font-size: 28rpx;
    color: #000000;
  }

  .pop-ctx {
    padding: 0 32rpx;

    &.pop-ctx-qudao {
      padding: 0;

      .xingbie-box {
        margin-bottom: calc(96rpx + constant(safe-area-inset-bottom));
        margin-bottom: calc(96rpx + env(safe-area-inset-bottom));
      }
    }

    .xingbie-box {
      margin-bottom: 150rpx;

      .items {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .item {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 334rpx;
          height: 80rpx;
          background: #f6f6f6;
          border-radius: 64rpx 64rpx 64rpx 64rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #f49c0d;

          &.select {
            color: #fff;
            background: #f49c0d;
          }
        }
      }
    }
  }

  .pop-foot {
    .btn {
      width: 100%;
      height: 80rpx;
      background: #f49c0d;
      border-radius: 64rpx 64rpx 64rpx 64rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #ffffff;
    }
  }
}
</style>
